<template>
  <el-form ref="loginFormRef" :model="loginForm"
           :rules="loginRules" class="login-form"
           autocomplete="on" label-position="left"
           @submit.native.prevent>
    <!-- 账户名表单选项 -->
    <el-form-item prop="username" class="form-item">
      <el-icon :size="24"><User/></el-icon>
      <el-input
          v-model="loginForm.username"
          placeholder="请输入账号" clearable
      />
    </el-form-item>

    <!-- password表单选项 -->
    <el-form-item prop="password" class="form-item">
      <el-icon :size="24"><Lock/></el-icon>
      <el-input
          v-model="loginForm.password"
          placeholder="请输入密码" type="password" show-password
          @keyup.enter.native="handleLogin()"
      />
    </el-form-item>

    <!-- 记住密码 -->
    <el-form-item class="remember-password">
      <el-checkbox v-model="loginForm.isRemember">记住密码</el-checkbox>
    </el-form-item>

    <!-- 登录按钮 -->
    <el-button class="login-button" color="#41CADB"
               :loading="isLoading"
               @click.prevent="handleLogin()">登录
    </el-button>
  </el-form>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { defineModel, defineEmits, ref, onMounted, PropType } from 'vue'
import { ILoginForm } from '@/types'
import { ElMessage } from 'element-plus'
import { getLocalStorage, setLocalStorage } from '@/utils/storageUtil'
import { decryptAES, encryptAES } from '@/utils/cryptoUtil'

const loginForm = defineModel({
  required: true,
  type: Object as PropType<ILoginForm>
})
const isLoading = ref<Boolean>(false)

const loginFormRef = ref()

/**
 * 登录表单验证规则
 */
const loginRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的格式: 数字或英文字母', trigger: ['blur'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^[0-9a-zA-Z]+$/, message: '请输入正确的格式: 数字或英文字母', trigger: ['blur'] }
  ]
}

onMounted(() => {
  try {
    const loginFromStorage = getLocalStorage('loginForm')
    if (loginFromStorage) {
      const info: ILoginForm = JSON.parse(getLocalStorage('loginForm'))
      if (loginFromStorage && info.isRemember) {
        loginForm.value.username = info.username
        loginForm.value.password = decryptAES(info.password)
        loginForm.value.isRemember = info.isRemember
      }
    }
  } catch (e: unknown) {
    console.warn('LocalStorage解析错误')
  }
})

const emit = defineEmits<{
  (e: 'handleLogin'): void;
}>()

/**
 * 登录事件
 */
const handleLogin = () => {
  loginFormRef.value.validate(async (valid: any) => {
    if (valid) {
      isLoading.value = true

      try {
        // 1. 调用父组件事件 处理登录事件
        emit('handleLogin')
        // 2. 存储账户密码到localStorage中
        if (loginForm.value.isRemember) {
          setLocalStorage('loginForm', JSON.stringify({
            username: loginForm.value.username,
            password: encryptAES(loginForm.value.password),
            isRemember: loginForm.value.isRemember
          }))
        }
      } finally {
        isLoading.value = false
      }
    } else {
      ElMessage.error('请输入正确的信息')
      return false
    }
  })
}
</script>

<style lang="scss">
$theme-color: #41CADB;

// 登录表单
.login-form {
  width: 24vw;
  // margin: 15% auto 0;
  padding: 2vh 1vw;
  border: 2px solid $theme-color;
  border-radius: 15px;

  // 表单
  .form-item {
    background-color: #F6F7F9;
    border-radius: 5px;
    color: #000000;
    margin-bottom: 2.5vh;

    // 表单内容
    .el-form-item__content {
      display: grid;
      grid-template-columns: 2.5vw 1fr;
      justify-items: center;
      align-items: center;

      // 输入框
      .el-input {
        height: 6vh;

        .el-input__wrapper {
          background-color: #E8F0FE;
          box-shadow: none;

          input {
            color: #000000;
            font-size: 1rem;
          }
        }
      }
    }
  }

  .form-item:hover {
    box-shadow: 0 0 0 1px $theme-color;
  }

  // 记住密码
  .remember-password {
    .el-checkbox {
      .el-checkbox__input {
        .el-checkbox__inner {
          height: 1vw;
          width: 1vw;
        }

        .el-checkbox__inner:after {
          height: 0.6vw;
          width: 0.3vw;
        }
      }

      .el-checkbox__label {
         font-size: 1rem;
      }
    }
  }

  // 登录按钮
  .login-button {
    width: 100%;
    height: 5.4vh !important;
    border: none;
    border-radius: 15px;
    color: #FFFFFF;

    // 图标
    .el-icon {
      width: 1.5em;
      height: 1.5em;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    span {
      font-size: 1.5rem;
      font-weight: bold;
    }
  }

  .login-button:hover {
    color: #FFFFFF;
  }
}
</style>
